<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>文件上传</title>
	<link rel="stylesheet" type="text/css" href="css/upload.file.css"/>
	<link rel="stylesheet" href="../../css/mui.min.css">
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
		}

		html,
		body {
			background-color: #f8f8f8;
		}

		p {
			padding: 10px;
			margin: 0;
		}
		.mlr15{
			margin: 0 15px
		}
		.upload-file {
			background: cornflowerblue;
			color: #ffffff;
			padding: 8px 25px;
			border-radius: 3px;
			box-sizing: border-box;
			font-size: 12px;
			cursor: pointer;
		}

		.pb15 {
			padding-bottom: 15px !important;
		}
	</style>
</head>

<body>
	<header class="mui-bar mui-bar-nav">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 class="mui-title">上传文件</h1>
	</header>
	<div class="mui-content">
	<p>图片上传</p>
	<div id='image-list' class="row image-list"></div>

	<p>多选文件上传</p>
	<div id='file-list2' class="row image-list">
		<p>添加 image-item 可以在js代码还未加载执行时占位显示，初始化时 image-list 容器会被清空</p>
		<div class="image-item" data-type="upload-input">
			<div class="image-close"></div>
			<div class="image-up"></div>
			<input type="file" class="file">
		</div>
	</div>
	<br>
	<span class="upload-file mlr15" id="clearUpload">手动清除</span>
	<br>
	<br>

	<!-- <p>按钮多文件上传 - 暂不可用</p>
	<div class="row image-list upload-file-cont pb15">
		<span class="upload-file" id="upload-file">上传文件</span>
		<p>开发中</p>
	</div> -->
</div>
	<script src="upload.file.js" type="text/javascript" charset="utf-8"></script>
	<!-- <script src="../js/mui.min.js"></script> -->
	<script type="text/javascript">
		UploadFile({
			container: "#image-list",
			accept: 'image/*,gif'
		});

		var upfile2 = new UploadFile({
			container: "#file-list2",
			accept: 'ipa,apk,xls,xlsx,xlsm,xlt,doc,dotx,docx,ppt,pdf,pptx,txt,image/*,gif',//文件MIME类型 别名
			mime: '',//文件MIME类型，若传入则覆盖 accept 别名
			showFileName: true, //显示文件名
			//showProgress: true, //开启自动模拟进度条（进度条100%后需要在 callBack 回调执行：self.progress(100);关闭进度条 ）
			size: 1024 * 1024 * 1024 * 1, //文件大小限制
			count: 10, //文件数量限制
			repeat: false, //容许重复文件 false
			multiple: true, //多文件上传 - 开发中
			msgCallBack: function (o) { //消息提醒回调函数
				console.log(JSON.stringify(o));
				// * 方便使用特定弹出窗口提示消息 *
				// - 使用示例 - 
				const _mui = window.mui || {};
				let toast = _mui.toast || alert;

				if (o.type == 'msg') {//普通消息 【暂无此消息类型】
					toast(o.msg, { type: 'div' })
				}
				if (o.type == 'warn') {//警告： 文件正在上传提示语、
					toast(o.msg, { type: 'div' })
				}
				if (o.type == 'error') {//错误： 文件格式不正确、文件大小不正确
					toast(o.msg)
				}
			},
			callBack: function (files, targetUrl, box, changeIndex) { //change file 钩子函数
				console.log(this.files);//待上传文件
				console.log(files);//添加/更换的文件

				const self = this;
				let _proVal = 0;

				//模拟服务器返回文件name标记
				if (changeIndex > -1) { //更换已有的文件回调判断 默认 -1：添加文件  >-1 为更换文件
					console.log('文件更换')
				}

				/* 模拟文件进度 */
				// setTimeout(function () { //模拟上传耗时
				// 	self.progress(100); //上传完成
				// }, 1500);

				/* 服务器实时返回上传进度 */
				self.progress(0, true); //预先调用-传入true关闭自动模拟进度条
				let _setInterval = setInterval(function () { //模拟请求耗时
					_proVal += parseInt(Math.random() * 7);
					if (_proVal >= 100) {
						clearInterval(_setInterval);
						_proVal = 100;
					}
					self.progress(_proVal, true); //更新上传进度
				}, 100);
			}
		});

		document.getElementById('clearUpload').addEventListener('click', function () {
			upfile2.rest(function (self) {
				console.log('重置上传回调',self)
			});
		})



	</script>
</body>

</html>